<template>
  <section>
    <ym-title-control has-back
                      :title="$route.meta.title"></ym-title-control>
    <div class="m-card-view">
      <el-form label-width="130px"
               label-position="right"
               inline>
        <el-form-item label="标题名：">{{detail.标题名}}</el-form-item>
        <el-form-item label="下单用户：">{{detail.user && detail.user.用户名称}}</el-form-item>
        <el-form-item label="下单时间：">{{detail.下单时间 | filterDate}}</el-form-item>
        <el-form-item label="预约门店：">{{detail.store && detail.store.名称}}</el-form-item>
        <el-form-item label="预约时间：">{{detail.预约时间 | filterDate}}</el-form-item>
        <!-- <el-form-item label="到店时间：">{{detail.到店时间 | filterDate}}</el-form-item> -->
        <!-- <el-form-item label="预约人：">{{detail.预约人}}</el-form-item> -->
        <el-form-item label="预约电话：">{{detail.预约电话}}</el-form-item>
        <el-form-item label="预约人数：">{{detail.人数}}人</el-form-item>
        <el-form-item label="优惠金额：">￥{{detail.优惠金额}}</el-form-item>
        <el-form-item label="实收金额：">￥{{detail.实收金额}}</el-form-item>
        <el-form-item label="状态：">{{detail.NodeType && detail.NodeType.namecode}}</el-form-item>
        <el-form-item label="发票类型：">{{detail.发票类型}}</el-form-item>
        <el-form-item label="发票抬头：">{{detail.发票抬头}}</el-form-item>
        <div>
          <el-form-item label="预约备注：">{{detail.预约备注}}</el-form-item>
        </div>
      </el-form>
    </div>
    <ym-shape-title text="服务内容"></ym-shape-title>
    <div class="m-card-view">
      <el-table :data='goods'
                border
                stripe>
        <el-table-column label="标识"
                         prop="id"
                         width="100"></el-table-column>
        <el-table-column label="名称"
                         prop="名称内容"></el-table-column>
        <el-table-column label="子项描述"
                         prop="子项描述"></el-table-column>
        <el-table-column label="服务员"
                         prop="staff.真实姓名"
                         align="center"></el-table-column>
        <el-table-column label="数量"
                         prop="数量"
                         align="center"></el-table-column>
        <el-table-column label="单位"
                         prop="单位"
                         align="center"></el-table-column>
        <el-table-column label="金额"
                         prop="金额"
                         align="center"></el-table-column>
        <el-table-column label="状态"
                         prop="NodeType.namecode"
                         align="center"></el-table-column>
      </el-table>
    </div>
    <ym-shape-title text="支付信息"></ym-shape-title>
    <div class="m-card-view">
      <el-table :data='payInfo'
                border
                stripe>
        <el-table-column label="标识"
                         prop="id"
                         width="100"></el-table-column>
        <el-table-column label="支付方式"
                         prop="支付方式.名称"></el-table-column>
        <el-table-column label="支付时间">
          <template slot-scope="{row}">{{row.optdate | filterDate}}</template>
        </el-table-column>
        <el-table-column label="支付信息"
                         prop="支付信息"
                         align="center"></el-table-column>
        <el-table-column label="操作额"
                         prop="操作额"
                         align="center"></el-table-column>
        <el-table-column label="状态"
                         prop="NodeType.namecode"
                         align="center"></el-table-column>
      </el-table>
    </div>
  </section>
</template>
<script>
import { accMul, accDiv } from '@/utils/calculate'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      id: 0,
      busiName: 'ServicOrdersList',
      detail: {},
      goods: [],
      payInfo: []
    }
  },
  filters: {
    filterDate (val) {
      return val ? dayjs(val).format('YYYY-MM-DD HH:mm:ss') : ''
    }
  },
  created () {
    let { id } = this.$route.query
    this.id = id
    this.getList()
    this.getOrderGoods()
    this.getOrderPay()
  },
  methods: {
    getList () {
      this.$command.execute({
        api: `/api/SelectByConds/ServicOrders`,
        params: {
          index: 0,
          pageSize: 1,
        },
        data: {
          "CONDS": ["id", this.id],
          "COLUMNS": ["id", "NodeType", "下单人", "下单人:id|用户名称 user", "下单时间", "人数", "优惠金额", "到店时间", "发票抬头", "发票类型", "实收金额", "状态", "预约人", "预约备注", "预约时间", "预约电话", "预约门店", "预约门店:名称|id store", "标题名"]
        }
      }).then(res => {
        if (res.data.length) {
          let item = res.data[0]
          item.优惠金额 = accDiv(item.优惠金额, 100)
          item.实收金额 = accDiv(item.实收金额, 100)
          this.detail = item
        }
      })
    },
    getOrderGoods () {
      this.$command.execute({
        api: `/api/SelectByConds/${this.busiName}`,
        params: {
          index: 0,
          pageSize: 0,
        },
        data: {
          "CONDS": ["订单", this.id],
          "COLUMNS": ["id", "单位", "名称内容", "子项描述", "数量", "服务", "服务员", "服务员:id|真实姓名 staff", "状态", "订单", "金额", 'NodeType']
        }
      }).then(res => {
        this.goods = res.data.map(e => {
          e.金额 = '￥' + accDiv(e.金额, 100)
          return {
            ...e
          }
        })
      })
    },
    getOrderPay () {
      this.$command.execute({
        api: `/api/SelectByConds/ServicOrdersPay`,
        params: {
          index: 0,
          pageSize: 0,
        },
        data: {
          "CONDS": ["订单", this.id],
          "COLUMNS": ["id", "优惠金额", "操作额", "支付信息", "支付关联", "支付方式:id|名称", "状态", "用户卡券:名称", "订单", 'NodeType', 'optdate']
        }
      }).then(res => {
        this.payInfo = res.data.map(e => {
          e.优惠金额 = '￥' + accDiv(e.优惠金额, 100)
          e.操作额 = '￥' + accDiv(e.操作额, 100)
          return {
            ...e
          }
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.m-card-view {
  padding-bottom: 20px;
}
</style>
